<!-- 
    输入框组件

    上方一个提示表示这个输入框的名称
    底下一个输入框 输入框里左侧是一个图标 右侧是输入的内容
-->
<template>
    <div class="base-component">
        <div class="title">{{ title }}</div>
        <div class="input-box">
            <div class="icon" :style="`--icon: url(${ icon })`"></div>
            <input :type="type" :placeholder="placeholder" :value="value">
        </div>
    </div>
</template>

<script setup>
defineProps({
    type: String,
    title: String,
    icon: String,
    value: String,
    placeholder: String,
});
</script>

<style scoped lang="less">
.base-component {
    width: 100%;

    .title {
        font-size: 0.9vw;
        color: #222;
        margin-bottom: 0.5vw;
    }

    .input-box {
        box-sizing: border-box;
        padding: 0.5vw;
        display: flex;
        align-items: center;
        gap: 0.5vw;
        border-radius: 0.3vw;
        outline: 0.05vw solid #6b7280;

        .icon {
            --size: 1vw;
            width: var(--size);
            height: var(--size);
        }

        input {
            flex: 1;
            border: 0;
            outline: 0;
        }
    }
}
</style>